<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('货位设置')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="ui-layout-west">
        <div class="main-content">
            <div class="box box-main">
                <div class="box-header">
                    <div class="box-title">
                        <i class="fa icon-grid"></i> 仓库
                    </div>
                    <div class="box-tools pull-right">
                        <a type="button" class="btn btn-box-tool menuItem" href="#" onclick="wareInfo()" title="仓库管理">
                            <i class="fa fa-edit"></i>
                        </a>
                        <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display: none">
                            <i class="fa fa-chevron-up"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠">
                            <i class="fa fa-chevron-down"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" id="btnRefresh" onclick="queryCellInfoTree()" title="刷新仓库">
                            <i class="fa fa-refresh"></i>
                        </button>
                    </div>
                </div>
                <div class="ui-layout-content">
                    <div id="tree" class="ztree"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-div ui-layout-center">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input type="hidden" id="shelfId" name="shelfId">
                    <div class="select-list">
                        <ul>
                            <li>
                                状态：
                                <select name="state">
                                    <option value="">全部</option>
                                    <option value="0">无货</option>
                                    <option value="1">有货</option>
                                    <option value="2">出库中</option>
                                    <option value="3">入库中</option>
                                    <option value="4">故障</option>
                                    <option value="5">入库需盘点</option>
                                    <option value="6">出库需盘点</option>
                                    <option value="7">移库需盘点</option>
                                    <option value="8">禁用</option>
                                    <option value="9">移库中</option>
                                </select>
                            </li>
                            <li>
                                排：
                                <select name="sPai">
                                    <option value="">全部</option>
                                    <option v-for="(item, index) in sPaiList" :key="index" :value="item.id" v-cloak>{{item.num}}</option>
                                </select>
                            </li>
                            <li>
                                列：
                                <select name="sLie">
                                    <option value="">全部</option>
                                    <option v-for="(item, index) in sLieList" :key="index" :value="item.id" v-cloak>{{item.num}}</option>
                                </select>
                            </li>
                            <li>
                                层：
                                <select name="sFloor">
                                    <option value="">全部</option>
                                    <option v-for="(item, index) in sFloorList" :key="index" :value="item.id" v-cloak>{{item.num}}</option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:cellInfo:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="system:cellInfo:edit">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:cellInfo:remove">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-primary" @click="changeAll()" shiro:hasPermission="system:cellInfo:update">
                    <i class="fa fa-hourglass"></i> 启用/禁用
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
            </div>
        </div>
    </div>
<div th:include="include :: footer"></div>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:cellInfo:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:cellInfo:remove')}]];
    var prefix = ctx + "system/cellInfo";

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        queryList();
        queryCellInfoTree();
    });

    function queryList(){
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "货位",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'cellId',
                    title: '货位ID',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'cellCode',
                    title: '货位编码',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'memo',
                    title: '货位描述',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'shelfName',
                    title: '巷道',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'sPai',
                    title: '排',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'sLie',
                    title: '列',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'sFloor',
                    title: '层',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'length',
                    title: '长 (mm)',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'width',
                    title: '宽 (mm)',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'hight',
                    title: '高 (mm)',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'state',
                    title: '状态',
                    align: 'center',
                    visible: true,
                    formatter: function (value, row, index){
                        if(value == 0){
                            return "无货";
                        }else if(value == 1){
                            return "有货";
                        }else if(value == 2){
                            return "出库中";
                        }else if(value == 3){
                            return "入库中";
                        }else if(value == 4){
                            return "故障";
                        }else if(value == 5){
                            return "入库需盘点";
                        }else if(value == 6){
                            return "出库需盘点";
                        }else if(value == 7){
                            return "移库需盘点";
                        }else if(value == 8){
                            return "禁用";
                        }else if(value == 9){
                            return "移库中";
                        }
                    }
                },
                {
                    field: 'orders',
                    title: '排序',
                    align: 'center',
                    visible: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index){
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.cellId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.cellId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    }

    function queryCellInfoTree(){
        var url = ctx + "system/cellInfo/treeData";
        var options = {
            url: url,
            expandLevel: 3,
            onClick: zOnClick
        };
        $.tree.init(options);
        function zOnClick(event, treeId, treeNode){
            $("#shelfId").val(treeNode.id);
            $.table.search();
        }
    }

    function wareInfo(){
        var url = ctx + "system/wareInfo";
        createMenuItem(url, "仓库设置");
    }

    $('#btnExpand').click(function(){
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function(){
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function(){
        queryCellInfoTree();
    });

    var app = new Vue({
        el: '.container-div',
        data: {
            sPaiList: [
                {id: 1, num: '1排'},
                {id: 2, num: '2排'},
                {id: 3, num: '3排'},
                {id: 4, num: '4排'},
                {id: 5, num: '5排'},
                {id: 6, num: '6排'},
                {id: 7, num: '7排'},
                {id: 8, num: '8排'},
                {id: 9, num: '9排'},
                {id: 10, num: '10排'},
                {id: 11, num: '11排'},
                {id: 12, num: '12排'}
            ],
            sLieList: [
                {id: 1, num: '1列'},
                {id: 2, num: '2列'},
                {id: 3, num: '3列'},
                {id: 4, num: '4列'},
                {id: 5, num: '5列'},
                {id: 6, num: '6列'},
                {id: 7, num: '7列'},
                {id: 8, num: '8列'},
                {id: 9, num: '9列'},
                {id: 10, num: '10列'},
                {id: 11, num: '11列'},
                {id: 12, num: '12列'},
                {id: 13, num: '13列'},
                {id: 14, num: '14列'},
                {id: 15, num: '15列'},
                {id: 16, num: '16列'},
                {id: 17, num: '17列'},
                {id: 18, num: '18列'},
                {id: 19, num: '19列'},
                {id: 20, num: '20列'},
                {id: 21, num: '21列'},
                {id: 22, num: '22列'},
                {id: 23, num: '23列'},
                {id: 24, num: '24列'}
            ],
            sFloorList: [
                {id: 1, num: '1层'},
                {id: 2, num: '2层'},
                {id: 3, num: '3层'},
                {id: 4, num: '4层'}
            ]
        },
        methods: {
            changeAll: function(){
                var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
                if (rows.length == 0) {
                    $.modal.alertWarning("请至少选择一条记录");
                    return;
                }else{
                    $.ajax({
                        url: "/system/cellInfo/list",
                        type: "POST",
                        success: function(data){
                            var data = data.rows;
                            var arrY = [];
                            var arrN = [];
                            for(var i = 0; i < data.length; i++){
                                for(var j = 0; j < rows.length; j++){
                                    if(data[i].cellId == rows[j] && data[i].state == 1){
                                        arrY.push(data[i].cellId);
                                    }else if(data[i].cellId == rows[j] && data[i].state == 2){
                                        arrY.push(data[i].cellId);
                                    }else if(data[i].cellId == rows[j] && data[i].state == 3){
                                        arrY.push(data[i].cellId);
                                    }else if(data[i].cellId == rows[j] && data[i].state == 5){
                                        arrY.push(data[i].cellId);
                                    }else if(data[i].cellId == rows[j] && data[i].state == 6){
                                        arrY.push(data[i].cellId);
                                    }else if(data[i].cellId == rows[j] && data[i].state == 7){
                                        arrY.push(data[i].cellId);
                                    }else if(data[i].cellId == rows[j] && data[i].state == 8){
                                        arrN.push(data[i].cellId);
                                    }else if(data[i].cellId == rows[j] && data[i].state == 9){
                                        arrY.push(data[i].cellId);
                                    }
                                }
                            }
                            if(arrY.length == 0){
                                if(arrN.length == rows.length){
                                    $.modal.confirm("确认要启用选中的" + rows.length + "条数据吗?", function () {
                                        var url = ctx + 'system/cellInfo/updateStates';
                                        var data = {"ids": rows.join()};
                                        $.operate.submit(url, "post", "json", data);
                                    });
                                }else{
                                    $.modal.confirm("确认要禁用选中的" + rows.length + "条数据吗?", function () {
                                        var url = ctx + 'system/cellInfo/updateStates';
                                        var data = {"ids": rows.join()};
                                        $.operate.submit(url, "post", "json", data);
                                    });
                                }
                            }else{
                                layer.alert("货位:" + arrY + "上有货，确定禁用吗？", {
                                    title: "系统提示",
                                    btn: ['确定','取消'],
                                    yes: function(index, layero){
                                        $.modal.confirm("确认要禁用选中的" + rows.length + "条数据吗?", function () {
                                            var url = ctx + 'system/cellInfo/updateStates';
                                            var data = {"ids": rows.join()};
                                            $.operate.submit(url, "post", "json", data);
                                        });
                                    }
                                });
                            }
                        }
                    })
                }
            }
        }
    })
</script>
</body>
</html>
